"use client";

import React, {useState} from "react";
import {
  Accordion,
  AccordionControl,
  AccordionItem,
  AccordionPanel,
  Button,
  Group,
  Image,
  Stack,
  Title,
  Text,
  Badge,
} from "@mantine/core";
import classes from "./page.module.css";
import {IconArrowNarrowRight} from "@tabler/icons-react";
import Link from "next/link";

interface StepProps {
  value: "step1" | "step2" | "step3";
  title: string;
  description: string;
}
const steps: StepProps[] = [
  {
    value: "step1",
    title: "第一步：网络调整",
    description: "根据系统建议/个人思路进行网络调整。",
  },
  {
    value: "step2",
    title: "第二步：中继仿真",
    description: "基于最短路径算法，求取局向流量，并初步计算带宽。",
  },
  {
    value: "step3",
    title: "第三步：带宽取定",
    description: "对仿真结果进行转换规则调整，手动调整。",
  },
];

export default function Page() {
  const [currentStep, setCurrentStep] = useState<"step1" | "step2" | "step3">("step1");
  // 生成AccordionItem的函数，减少重复代码
  const generateAccordionItem = (step: StepProps) => (
    <AccordionItem className={classes.item} value={step.value}>
      <AccordionControl>
        <Group gap="xs">
          <Text>{step.title}</Text>
          {currentStep === step.value && (
            <Badge variant="light" color="blue">
              当前步骤
            </Badge>
          )}
        </Group>
      </AccordionControl>
      <AccordionPanel>{step.description}</AccordionPanel>
    </AccordionItem>
  );
  return (
    <Group justify="center" py={100} gap="xl">
      <Stack align="center" justify="center">
        <Image src="/svgs/sys.svg" alt="sys" w={250} />
        <Button
          component={Link}
          href={`/ipdv2/tools/relay-simulation/${currentStep}`}
          rightSection={<IconArrowNarrowRight size={16} stroke={2} />}
        >
          进入当前步骤
        </Button>
      </Stack>

      <Stack>
        <Title order={2} px="xs">
          中继仿真核心步骤
        </Title>
        <Accordion value={currentStep} variant="separated" w={400}>
          {steps.map((step) => generateAccordionItem(step))}
        </Accordion>
      </Stack>
    </Group>
  );
}
